<template>
  <div>
    <div class="data_box">
      <!-- left_box -->
      <div class="data_box_left">
        <div class="left_top">
          <el-card class="box-card left_card" shadow="never">
            <div class="Tickets_text">
              工单统计 <span>2022.11.01 ~ 2022.11.22</span>
            </div>
            <div class="Tickets">
              <div>
                <h1>417</h1>
                <span>工单总数(个)</span>
              </div>
              <div>
                <h1>0</h1>
                <span>完成工单(个)</span>
              </div>
              <div>
                <h1>0</h1>
                <span>进行工单(个)</span>
              </div>
              <div>
                <h1>412</h1>
                <span>取消工单(个)</span>
              </div>
            </div>
          </el-card>
          <el-card class="box-card right_card" shadow="never">
            <div class="sell_text">
              销售统计 <span>2022.11.01 ~ 2022.11.22</span>
            </div>
            <div class="sell">
              <div>
                <h1>10325</h1>
                <span>订单数(个)</span>
              </div>
              <div>
                <h1>7.28</h1>
                <span>销售额(万元)</span>
              </div>
            </div>
          </el-card>
        </div>

        <!-- echarts_top -->
        <div class="left_bottom">
          <el-card class="box-card bottom_card" shadow="never">
            <div class="tabs">
              <p>
                销售数据
                <span>2022.11.21 ~ 2022.11.22</span>
              </p>
              <div>

        <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="周" name="first"></el-tab-pane>
       <el-tab-pane label="月" name="second"></el-tab-pane>
       <el-tab-pane label="年" name="third"></el-tab-pane>
       </el-tabs>

              </div>
            </div>

            <div>
              <div
                ref="box"
                class="chart-box"
                style="height: 300px"
              ></div>
              <div
                ref="box1"
                class="chart-box1"
                style="height: 300px"
              ></div>
            </div>
          </el-card>
        </div>
      </div>
      <!-- echarts_top -->

      <!-- right_box -->
      <div class="data_box_right">
        <el-card class="box-card hot_card" shadow="never">
          <div class="shopHot_text">
            商品热榜 <span>2022.11.01 ~ 2022.11.19</span>
          </div>
          <div class="shopHot">
            <div>
              <span class="imglist">1</span>
              <span class="shophot_list">医保</span>
            </div>
            <div>937单</div>
          </div>
          <div class="shopHot">
            <div>
              <span class="imglist">1</span>
              <span class="shophot_list">医保</span>
            </div>
            <div>937单</div>
          </div>
          <div class="shopHot">
            <div>
              <span class="imglist">1</span>
              <span class="shophot_list">医保</span>
            </div>
            <div>937单</div>
          </div>
          <div class="shopHot">
            <div>
              <span class="imglist">1</span>
              <span class="shophot_list">医保</span>
            </div>
            <div>937单</div>
          </div>
          <div class="shopHot">
            <div>
              <span class="imglist">1</span>
              <span class="shophot_list">医保</span>
            </div>
            <div>937单</div>
          </div>
          <div class="shopHot">
            <div>
              <span class="imglist">1</span>
              <span class="shophot_list">医保</span>
            </div>
            <div>937单</div>
          </div>
          <div class="shopHot">
            <div>
              <span class="imglist">1</span>
              <span class="shophot_list">医保</span>
            </div>
            <div>937单</div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- main_echarts_bottom -->
    <div class="main_echarts_bottom">
      <el-card class="box-card echarts_bottom_left" shadow="never">
        <div class="Tickets_text">
          <p>合作商点位数Top5</p>
          <span>...</span>
        </div>
        <div class="echarts_bottom_box">
          <div class="main_echarts_bottom">
            <!-- main_echarts_bottom -->
            <div
              ref="box3"
              class="chart-box3"
              style="height: 330px"
            ></div>
            <!-- main_echarts_bottom -->
          </div>
          <div class="main_echarts_bottom_text">
            <h5>
              19
              <p>点位数</p>
            </h5>

            <h5>
              4
              <p>合作商数</p>
            </h5>
          </div>
        </div>
      </el-card>

      <el-card class="box-card echarts_bottom_right" shadow="never">
        <div class="Tickets_text">
          <p>异常设备监控</p>
          <span>...</span>
        </div>
        <div class="err_watcher">
          <img
            src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
            alt=""
          />
          <div class="dataText">暂无数据</div>
        </div>
      </el-card>
    </div>
    <!-- main_echarts_bottom -->
  </div>
</template>

<script>
import * as echarts from 'echarts'
// import getTaskType2 from '@/store/modules/home'
export default {
  data () {
    return {
      activeName: 'first'
    }
  },

  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
      // getTaskType2()
    }
  },
  computed: {
  },
  mounted () {
    console.log()
    const myChart = echarts.init(this.$refs.box)
    myChart.setOption({
      title: {
        text: '销售额趋势图',
        left: 'center',
        textStyle: {
          fontSize: '14px',
          color: '#333333'
        }
      },

      tooltip: {
        trigger: 'axis' // 悬浮弹框
      },
      color: ['#ec635d'],
      xAxis: {
        type: 'category',
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      },
      yAxis: {
        type: 'value',
        name: '单位：元'
      },
      series: [
        {
          data: [3000, 0],
          type: 'line',
          smooth: true,
          symbolSize: 4, // 设定实心点的大小
          itemStyle: {
            normal: {
              color: '#ec635d',
              label: {
                show: false, // 开启显示
                position: 'bottom', // 在下方显示
                textStyle: {
                  // 数值样式
                  color: '#65ABE7',
                  fontSize: 16
                }
              }
            }
          },

          // 阴影样式
          // smooth: true,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(243, 93, 93,0.7)' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255 , 0.1)' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        }
      ]
    })

    const myChart1 = echarts.init(this.$refs.box1)
    myChart1.setOption({
      title: {
        text: '销售额分布',
        left: 'center',
        textStyle: {
          fontSize: '14px',
          color: '#333333'
        }
      },
      tooltip: {},
      xAxis: {
        data: ['北京平', '霍营街']
      },
      yAxis: {
        type: 'value',
        name: '单位：元'
      },
      series: [
        {
          name: '销量',
          type: 'bar',
          barWidth: '10%',
          color: '#96b0f9',
          data: [18289.1, 2974.8]
        }
      ]
    })

    const myChart2 = echarts.init(this.$refs.box3)
    myChart2.setOption({
      title: {
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} <br/> 总占比 :{c}%'
      },
      label: {
        show: true,
        formatter: '{b}\n{d}%',
        fontWeight: 700

      },
      series: [
        {
          radius: ['25%', '60%'],
          roseType: 'radius',
          type: 'pie',
          data: [
            { value: 40, name: '金燕龙' },
            { value: 8, name: '北京合作商' },
            { value: 8, name: '天华物业' },
            { value: 4, name: '佳佳' },
            { value: 4, name: 'likede' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
  }
}
</script>

<style lang="less" scoped>
::v-deep .el-tabs__nav-wrap::after{
      background: #fff;
    -webkit-box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    border-radius: 7px;
    font-weight: 600;
    color: #fff;
}
::v-deep .el-tabs__nav.is-top{
  width: 130px;
  height: 33px;
  line-height: 33px;
  padding: 0 13px 3px 20px;
  background-color: #f8faff;
  border-radius: 10px;
}
::v-deep .el-tabs__item.is-active{
  color: #000 !important;
  font-size: 13px;
}
::v-deep .el-tabs__active-bar{
  margin-left: 10px;
  position: absolute;
  width: 36px !important;
  border-radius: 10px;
  color:#000;
  height: 26px !important;
  display: inline-block;
    bottom: 4px;
    left: -2px;
    height: 2px;
    box-shadow: 0px 0px 5px 1px rgb(230, 228, 228);
    // border: 1px ;
    background-color: rgba(255, 255, 255, 2);
    z-index: -99;
    transition: transform .3s cubic-bezier(.645,.045,.355,1);
    list-style: none;
}
.tabs{
  display: flex;
  justify-content: space-between;
}
  .data_box {
    display: flex;
    .data_box_left {
      .left_top {
        display: flex;
        .left_card {
          background: #e9f3ff;
          background-image: url(data:),
            url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
          background-repeat: no-repeat, no-repeat;
          border-radius: 20px;
          background-position: 0 0, calc(100% - 12px) 100%;
          width: 684px;
          height: 176px;
          span {
            margin-left: 10px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999;
          }
          .Tickets_text {
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333;
            p {
              margin-left: 10px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999;
            }
          }
          .Tickets {
            display: flex;
            justify-content: space-around;
            margin-top: -15px;

            h1 {
              color: #072074;
              margin-bottom: 5px;
              font-size: 36px;
              font-weight: 600;
              text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
            }
            span {
              height: 17px;
              margin-left:0px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #91a7dc;
              line-height: 17px;
            }
          }
        }
        .right_card {
          width: 575px;
          height: 176px;
          margin-left: 20px;
          background: #e9f3ff;
          background: #fbefe8
            url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat
            calc(100% - 12px) 100%;
          border-radius: 20px;
          .sell_text {
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333;
            span {
              margin-left: 10px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999;
            }
          }
          .sell {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
            h1 {
              margin-top: 0px;
              margin-bottom: 5px;
              color: #ff5757;
              font-size: 36px;
              font-weight: 600;
              text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
            }
            span {
              height: 17px;
              margin-top: 3px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #de9690;
              line-height: 17px;
            }
          }
        }
      }
      //     <!-- echarts -->
      .bottom_card {
        width: 1260px;
        height: 352px;
        margin-top: 20px;
        border-radius: 20px;
        p {
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333;
        }
        span {
          margin-left: 10px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999;
        }
        .chart-box {
          width: 590px;
          display: inline-block;
          margin-top: 20px;
        }
        .chart-box1 {
          width: 520px;
          float: right;
          margin-top: 20px;
        }
      }
      //     <!-- echarts -->
    }
    .data_box_right {
      .hot_card {
        width: 398px;
        height: 550px;
        margin-left: 20px;
        border-radius: 20px;
        .shopHot_text {
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333;
          span {
            margin-left: 10px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999;
          }
        }
        .shopHot {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          margin-top: 25px;
          .imglist {
            background: url();
            width: 24px;
            font-size: 14px;
            color: #8e5900;
            background-position: center;
            height: 20px;
            display: inline-block;
            text-align: center;
            line-height: 20px;
            margin-left: 10px;
          }
          .shophot_list {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333;
            line-height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-left: 30px;
          }
          div {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #737589;
            line-height: 20px;
            text-align: right;
          }
        }
      }
    }
  }

  .main_echarts_bottom {
    display: flex;
    .echarts_bottom_left {
      width: 950px;
      height: 380px;
      margin-top: 20px;
      border-radius: 20px;
      .Tickets_text {
        display: flex;
        justify-content: space-between;
        span {
          color: #5f84ff;
          cursor: pointer;
          text-align: center;
          line-height: 6px;
          border-radius: 50%;
          width: 14px;
          height: 14px;
          border: 1px solid#5f84ff;
        }
      }
      p {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333;
      }
      .echarts_bottom_box {
        display: flex;
        align-items: center;
        .main_echarts_bottom {
          width: 500px;
          height: 300px;

          margin-left: 70px;
          .chart-box3 {
            width: 500px;
            display: inline-block;
            margin-top: 20px;
          }
        }
        .main_echarts_bottom_text {
          width: 154px;
          height: 230px;
          margin-top: 50px;
          text-align: center;
          margin-left: 30px;
          background-color: #f6f5f5;
          border-top-right-radius: 30px;
          border-bottom-left-radius: 30px;
          h5 {
            // height: 33px;
            margin-top: 40px;
            font-size: 24px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #072074;
            // line-height: 33px;
          }
          p {
            height: 17px;
            margin-top: 6px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000412;
            line-height: 17px;
          }
        }
      }
    }
    .echarts_bottom_right {
      width: 725px;
      margin-left: 20px;
      height: 380px;
      margin-top: 20px;
      border-radius: 20px;
      .Tickets_text {
        display: flex;
        justify-content: space-between;
        span {
          color: #5f84ff;
          cursor: pointer;
          text-align: center;
          line-height: 6px;
          border-radius: 50%;
          width: 14px;
          height: 14px;
          border: 1px solid#5f84ff;
        }
      }
      p {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333;
      }
      .err_watcher {
        width: 600px;
        height: 290px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
          width: 123px;
          height: 96px;
        }
        .dataText {
          margin-top: 25px;
          color: #20232a;
          font-size: 14px;
        }
      }
    }
  }
</style>
